<template>
  <div>
    <div id="start" v-show="running">
      <svg width='100%' height='100%' viewBox="0 0 100 100">
        <circle cx="50" cy="25" r="15"
                stroke="lightgray" stroke-width="3" fill="white"/>
        <line x1="45" y1="18" x2="45" y2="32"
              stroke="lightgray" stroke-width="3" fill="white"/>
        <line x1="55" y1="18" x2="55" y2="32"
              stroke="lightgray" stroke-width="3" fill="white"/>
      </svg>
    </div>
    <div id="pause" v-show="!running">
      <svg width='100%' height='100%' viewBox="0 0 100 100">
        <circle cx="50" cy="25" r="15"
                stroke="lightgray" stroke-width="3" fill="white"/>
        <polygon points="46,18 57,25 46,32"
                 stroke="lightgray" stroke-width="3" fill="white"/>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  name: "pause-start",
  props: ['running']
}
</script>

<style scoped>

</style>